<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的在线简历</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- 导航菜单 -->
    <nav id="navbar">
        <ul>
            <li><a href="#header">首页</a></li>
            <li><a href="#education">教育背景</a></li>
            <li><a href="#skills">技能专长</a></li>
            <li><a href="#projects">项目经验</a></li>
            <li><a href="#awards">获奖情况</a></li>
            <li><a href="#about">自我评价</a></li>
        </ul>
    </nav>

    <!-- 首页 -->
    <header id="header">
        <div class="profile">
            <img src="profile.jpg" alt="个人照片" class="profile-img">
            <h1>张三</h1>
            <p>求职意向：Java开发工程师</p>
        </div>
        <div class="contact-info">
            <p>电话: 123-4567-890</p>
            <p>邮箱: zhangsan@example.com</p>
            <p>GitHub: <a href="https://github.com/zhangsan" target="_blank">github.com/zhangsan</a></p>
        </div>
    </header>

    <!-- 教育背景 -->
    <section id="education" class="section">
        <h2 onclick="toggleSection('education-content')">教育背景</h2>
        <div id="education-content" class="content">
            <p><strong>XX职业技术学院</strong> - 软件技术专业</p>
            <p>2019.09 - 2023.06</p>
            <p>主修课程: Java编程、数据库原理、Web开发、数据结构与算法</p>
        </div>
    </section>

    <!-- 技能专长 -->
    <section id="skills" class="section">
        <h2 onclick="toggleSection('skills-content')">技能专长</h2>
        <div id="skills-content" class="content">
            <ul>
                <li>熟练掌握Java、Python编程语言</li>
                <li>熟悉Spring Boot、MyBatis等开发框架</li>
                <li>熟悉MySQL、Oracle数据库</li>
                <li>熟悉HTML、CSS、JavaScript等前端技术</li>
                <li>熟悉Linux操作系统和Git版本控制工具</li>
            </ul>
        </div>
    </section>

    <!-- 项目经验 -->
    <section id="projects" class="section">
        <h2 onclick="toggleSection('projects-content')">项目经验</h2>
        <div id="projects-content" class="content">
            <h3>在线图书管理系统</h3>
            <p><strong>项目时间:</strong> 2022.03 - 2022.06</p>
            <p><strong>项目描述:</strong> 基于Spring Boot和MySQL开发的图书管理系统，支持图书的增删改查、借阅归还等功能。</p>
            <p><strong>个人职责:</strong> 负责后端开发，设计数据库表结构，实现RESTful API接口。</p>
            <p><strong>技术栈:</strong> Java, Spring Boot, MySQL, HTML, CSS, JavaScript</p>
            <h3>个人博客网站</h3>
            <p><strong>项目时间:</strong> 2021.09 - 2021.12</p>
            <p><strong>项目描述:</strong> 使用Django框架开发的个人博客网站，支持文章发布、评论、用户注册登录等功能。</p>
            <p><strong>个人职责:</strong> 负责前后端开发，部署到Linux服务器。</p>
            <p><strong>技术栈:</strong> Python, Django, SQLite, HTML, CSS, JavaScript</p>
        </div>
    </section>

    <!-- 获奖情况 -->
    <section id="awards" class="section">
        <h2 onclick="toggleSection('awards-content')">获奖情况</h2>
        <div id="awards-content" class="content">
            <ul>
                <li>2022年校级编程大赛一等奖</li>
                <li>2021年国家励志奖学金</li>
            </ul>
        </div>
    </section>

    <!-- 自我评价 -->
    <section id="about" class="section">
        <h2 onclick="toggleSection('about-content')">自我评价</h2>
        <div id="about-content" class="content">
            <p>热爱编程，具备扎实的Java开发基础，熟悉常见开发框架和工具。有较强的学习能力和团队合作精神，能够快速适应新技术和新环境。</p>
        </div>
    </section>

    <!-- 页脚 -->
    <footer>
        <p>© 2023 张三. 版权所有.</p>
    </footer>

    <!-- JavaScript -->
    <script>
        // 切换内容显示/隐藏
        function toggleSection(id) {
            const content = document.getElementById(id);
            if (content.style.display === "none" || content.style.display === "") {
                content.style.display = "block";
            } else {
                content.style.display = "none";
            }
        }

        // 默认折叠部分内容
        window.onload = function () {
            const sections = ["education-content", "skills-content", "projects-content", "awards-content", "about-content"];
            sections.forEach(id => {
                document.getElementById(id).style.display = "none";
            });
        };
    </script>
</body>
</html>